<!-- 文本域回显表格数据，可换行 -->
<template>
  <div>
    <el-input v-model="textAreaValue" style="width: 240px" :rows="10" type="textarea" placeholder="Please input" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      testData: [
        { step: '点击新增创建按钮', expected: '有权限用户运行点击并正常跳转；无权限用户无按钮；跳转过程相应正常' },
        { step: '任务信息输入', expected: '必填项目标记正常，未填报识别正常' },
        { step: '完成创建', expected: '1. 任务创建页面正常跳转；2. 数据流到主责人抄送用户及管理用户正常' },
      ],
      textAreaValue: '',
    }
  },
  created() {
    this.generateFormattedText()
  },
  methods: {
    // 点击引用调用
    generateFormattedText() {
      let formattedText = '【步骤说明】\n'
      this.testData.forEach((item, index) => {
        formattedText += `${index + 1}、${item.step}\n`
      })

      formattedText += '\n【预期结果】\n'
      this.testData.forEach((item, index) => {
        formattedText += `${index + 1}、${item.expected}\n`
      })

      this.textAreaValue = formattedText
    },
  },
}
</script>
